<template>
    <div>
        <div class="comment">
            <mt-button type="primary" class="sub-btn" @click="postComment"
            >评论</mt-button
            >
            <div class="comment-msg">
                <mt-field
                        class="comment-input"
                        placeholder="请输入内容"
                        type="textarea"
                        rows="1"
                        v-model="textarea"
                ></mt-field>
            </div>
        </div>
        <p class="comment-list">精彩评论：共{{ commentList.length }}条评论</p>
        <ul class="popular" v-for="(item, index) in commentList" :key="index">
            <li>
                <div class="popular-imgAmsg">
                    <div class="popular-img">
                        <img :src="attachImageUrl(userPic[index])" />
                    </div>
                    <div class="popular-msg">
                        <div class="name">{{ userName[index] }}</div>
                        <div class="time">{{ item.createTime }}</div>
                    </div>
                </div>
                <div class="content">{{ item.content }}</div>
                <div class="up" ref="up" @click="postUp(item.id, item.up, index)">
                    {{ item.up }}
                    <svg class="icon">
                        <use xlink:href="#icon-zan"></use>
                    </svg>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import { Toast } from "mint-ui";
    import { mixin } from "../minx/index";
    import { mapGetters } from "vuex";
    import { setComment, setLike, getAllComment, getUserOfId } from "../utils/index";
    import axios from "axios";
    export default {
        name: "Comment",
        mixins: [mixin],
        props: [
            "playId", //歌曲或歌单id
            "type", //0歌曲、1歌单
        ],
        computed: {
            ...mapGetters([
                "id", //歌曲或歌单id
                "loginIn", //用户是否已登录
                "userId", //当前登录用户id
                "avator", //当前登录用户头像
            ]),
        },
        data() {
            return {
                textarea: "", //存放输入的评论内容
                commentList: [], //存放评论列表
                userPic: [], //用户的头像
                userName: [], //用户的昵称
            };
        },
        mounted() {
            this.getComment();
        },
        methods: {
            //提交评论
            postComment() {
                if (this.loginIn) {
                    let params = new URLSearchParams();
                    if (this.type === 0) {
                        params.append("songId", this.playId);
                    } else {
                        params.append("songListId", this.playId);
                    }
                    params.append("userId", this.userId);
                    params.append("type", this.type);
                    params.append("content", this.textarea);
                    axios.post("http://localhost:8888/comment/add", params).then(res => {
                        if (res.data.code == 1) {
                            Toast("评论成功");
                            this.textarea = "";
                            this.getComment();
                        } else {
                            Toast("评论失败");
                        }
                        // eslint-disable-next-line no-unused-vars
                    }).catch(err => {
                        Toast("评论失败");
                    })
                    // setComment(params)
                    //     .then((res) => {
                    //         if (res.code == 1) {
                    //             Toast("评论成功");
                    //             this.textarea = "";
                    //             this.getComment();
                    //         } else {
                    //             Toast("评论失败");
                    //         }
                    //     })
                    //     .catch((err) => {
                    //         Toast("评论失败");
                    //     });
                } else {
                    this.rank = null;
                    Toast("请先登录");
                }
            },
            //评论列表
            getComment() {
                /**
                 * export const getAllComment = (type,id) => {
    if(type == 0){              //歌曲
        return get(`/comment/commentOfSongId?songId=${id}`);
    }else{                      //歌单
        return get(`/comment/commentOfSongListId?songListId=${id}`);
    }
}
                 */
                if (this.type === 0) {
                    axios.get("http://localhost:8888/comment/commentOfSongId", {params: {songId: id}}).then(res => {
                        this.commentList = res.data;
                        for (let item of res.data) {
                            this.getUsers(item.userId);
                        }
//歌曲
                    }).catch(err => {
                            // console.log(err)
                        Toast("评论加载失败");
                        }
                    )
                } else {
//歌单
                    axios.get("http://localhost:8888/comment/commentOfSongListId", {params: {songListId: id}}).then(res => {
                        this.commentList = res.data;
                        for (let item of res.data) {
                            this.getUsers(item.userId);
                        }

                    }).catch(err => {
                            // console.log(err)
                        Toast("评论加载失败");
                        }
                    )

                }


                // getAllComment(this.type, this.playId)
                //     .then((res) => {
                //         this.commentList = res;
                //         for (let item of res) {
                //             this.getUsers(item.userId);
                //         }
                //     })
                //     .catch((err) => {
                //         Toast("评论加载失败");
                //     });
            },
            //获取用户的头像和昵称
            getUsers(id) {
                axios.get("http://localhost:8888/consumer/selectByPrimaryKey", {params: {id: id}}).then(res => {

                    this.userPic.push(res.data.avator);
                    this.userName.push(res.data.username);
                }).catch(err => {
                        // console.log(err)
                    Toast("出错了");
                    })
                ///consumer/selectByPrimaryKey?id`,id
                // getUserOfId(id)
                //     .then((res) => {
                //         this.userPic.push(res.avator);
                //         this.userName.push(res.username);
                //     })
                //     .catch((err) => {
                //         Toast("出错了");
                //     });
            },
            //给某一个评论点赞
            postUp(id, up, index) {
                if (this.loginIn) {
                    let params = new URLSearchParams();

                    params.append("id", id);
                    params.append("up", up + 1);
                    axios.post("http://localhost:8888/comment/like",params).then(res => {
                        if (res.data.code===1) {
                            this.$refs.up[index].children[0].style.color = "#2796cd";
                            this.getComment();
                        } else {
                            Toast("点赞失败");
                        }

                    }).catch(err => {
                            // console.log(err)

                        Toast("点赞失败");
                        }
                    )
                    // setLike(params)
                    //     .then((res) => {
                    //         if (res.code===1) {
                    //             this.$refs.up[index].children[0].style.color = "#2796cd";
                    //             this.getComment();
                    //         } else {
                    //             Toast("点赞失败");
                    //         }
                    //     })
                    //     .catch((err) => {
                    //         Toast("点赞失败");
                    //     });

                } else {
                    this.rank = null;
                    Toast("请先登录");
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    ul,
    li {
        padding-left: 0;
    }
    h2 {
        width: 2em;
    }
    .comment {
        margin-bottom: 2em;
        .comment-msg {
            .comment-input {
                border: 1px solid $color-grey;
            }
        }
    }

    // 评论按钮
    .sub-btn {
        float: right;
        height: 4em;
    }
    .comment-img {
        width: 3em;
        img {
            // 头像大小
            width: 3em;
        }
    }
    .popular {
        position: relative;
        .popular-imgAmsg {
            .popular-img {
                display: inline-block;
                width: 2em;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .popular-msg {
                display: inline-block;
                position: relative;
                padding-left: 1em;
                .name {
                    display: block;
                    color: $color-grey;
                }
                .time {
                    color: $color-grey;
                    font-size: 0.7em;
                    display: block;
                    width: 100%;
                }
            }
        }
        .up {
            position: absolute;
            right: 0;
            top: 0;
            color: $color-grey;
            font-weight:lighter;
            svg.icon {
                width: 15px;
                height: 15px;
                fill: currentColor;
                color: $color-grey;
            }
        }
    }
    // 评论内容
    .content {
        padding-left: 3.2em;
    }
    .popular:last-child {
        margin-bottom: 5em;
    }
    // 精彩评论
    .comment-list{
        color: $color-black;
        font-weight: bold;
    }

</style>
